/* ==================
		弹性布局
 ==================== */
.flex {
	display: flex !important;
	&-sub {
		flex: 1 !important;
	}
	&-twice {
		flex: 2 !important;
	}
	&-treble {
		flex: 3 !important;
	}
	&-column {
		flex-direction: column !important;
	}
	&-row {
		flex-direction: row !important;
	}
	&-column-reverse {
		flex-direction: column-reverse !important;
	}
	&-row-reverse {
		flex-direction: row-reverse !important;
	}
	&-wrap {
		flex-wrap: wrap !important;
	}
	&-center {
		@include flex-center;
	}
	&-bar {
		@include flex-bar;
	}
}
.basis {
	@each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
		&-#{$class} {
			flex-basis: $value !important;
		}
	}
}
.align {
	@each $class, $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
		&-#{$class} {
			align-items: $value !important;
		}
	}
}
.self {
	@each $class, $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
		&-#{$class} {
			align-self: $value !important;
		}
	}
}
.justify {
	@each $class, $value in (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around) {
		&-#{$class} {
			justify-content: $value !important;
		}
	}
}

// flex
.display-flex {
	display: flex;
}

// @flexlist: range(1, 12, 1);
// each(@flexlist,{
//   // .display-flex .flex-@{value} {
//   //   flex: @value;
//   // }
// });
// .display-flex .flex {
//   flex: 1;
// }

// grid

.flex {
	display: flex;
}
.flex-row {
	flex-direction: row;
}
.flex-row-reverse {
	flex-direction: row-reverse;
}
.flex-col {
	flex-direction: column;
}
.flex-col-reverse {
	flex-direction: column-reverse;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.flex-1 {
	flex: 1 1 0%;
}
.flex-auto {
	flex: 1 1 auto;
}
.flex-none {
	flex: none;
}
.flex-grow {
	flex-grow: 1;
}
.flex-grow-0 {
	flex-grow: 0;
}
.flex-shrink {
	flex-shrink: 1;
}
.flex-shrink-0 {
	flex-shrink: 0;
}
.justify-normal {
	justify-content: normal;
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}
.justify-evenly {
	justify-content: space-evenly;
}
.justify-stretch {
	justify-content: stretch;
}

.justify-items-start {
	justify-items: start;
}
.justify-items-end {
	justify-items: end;
}
.justify-items-center {
	justify-items: center;
}
.justify-items-stretch {
	justify-items: stretch;
}

/** Align Content **/
.content-normal {
	align-content: normal;
}
.content-center {
	align-content: center;
}
.content-start {
	align-content: flex-start;
}
.content-end {
	align-content: flex-end;
}
.content-between {
	align-content: space-between;
}
.content-around {
	align-content: space-around;
}
.content-evenly {
	align-content: space-evenly;
}
.content-baseline {
	align-content: baseline;
}
.content-stretch {
	align-content: stretch;
}

/** Align Items **/
.items-start {
	align-items: flex-start;
}
.items-end {
	align-items: flex-end;
}
.items-center {
	align-items: center;
}
.items-baseline {
	align-items: baseline;
}
.items-stretch {
	align-items: stretch;
}
